<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>我的</title>
    <link rel="stylesheet" href="bootstrap4/dist/css/bootstrap.css">
    <link rel="stylesheet" href="css/nav-bottom.css">
    <script src="bootstrap4/dist/js/jquery.slim.min.js"></script>
    <script src="bootstrap4/dist/js/bootstrap.bundle.min.js"></script>
    <script src="js/jquery-3.5.1.js"></script>
    <script src="js/code.js"></script>
    <link rel="stylesheet" href="css/user.css">
<!--    自封装的通用JSON相关方法-->
    <script src="js/json.js"></script>
    <script src="js/user.js"></script>
</head>
<body>
<div class="user text-center">
    <section class="user_profile bg-white" style="padding: 1rem">
        <div class="not_login">
            <div class="avatar_wrap" style="padding: 1rem">
                <img src="images/user/user.png" class="w-25">
            </div>
            <div class="login_wrap">
                <h5></h5>
                <button class="btn btn-dark" id="userLogin">登录</button>
                <button class="btn btn-dark d-none" id="quit">退出登录</button>
            </div>
        </div>
    </section>
    <!-- 我的订单 -->
    <section class="orders_module clear_fix dingdan">
        <p class="section_title text-left" style="border-bottom: 1px solid #CCC">我的订单</p>
        <div class="d-flex justify-content-around">
            <a href="cart.html" class="d-inline-block">
                待付款
            </a>
            <a href="javascript:void(0)" class="d-inline-block">待发货</a>
            <a href="javascript:void(0)" class="d-inline-block">待收货</a>
            <a href="javascript:void(0)" class="d-inline-block">我的订单</a>
        </div>
    </section>
</div>
<div class="login-register d-none">
    <ul class="nav nav-tabs" id="myTab" role="tablist">
        <li class="nav-item" role="presentation">
            <a class="nav-link active" id="login_tab" data-toggle="tab" href="#login" role="tab" aria-controls="login" aria-selected="true">登录</a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" id="register_tab" data-toggle="tab" href="#register" role="tab" aria-controls="register" aria-selected="false">注册</a>
        </li>
    </ul>
    <div class="tab-content" id="myTabContent">
        <div class="tab-pane fade show active" id="login" role="tabpanel" aria-labelledby="login_tab">
            <div class="bg">
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">用户名</span>
                    </div>
                    <input type="text" id="login_userName" class="form-control" maxlength="16" placeholder="请输入用户名">
                </div>
                <p>不存在该账号</p>
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">密码</span>
                    </div>
                    <input type="password" id="login_passWord" class="form-control" maxlength="16" placeholder="请输入密码">
                </div>
                <p>密码不正确</p>
                <button class="btn btn-primary" id="login_user">登录</button>
            </div>
        </div>
        <div class="tab-pane fade" id="register" role="tabpanel" aria-labelledby="register_tab">
            <div class="bg">
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">用户名</span>
                    </div>
                    <input type="text" id="register_userName" class="form-control" maxlength="16" placeholder="4-16位由数字字母下划线组成">
                </div>
                <p class="userName-register">用户名已被注册</p>
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">密码</span>
                    </div>
                    <input type="password" id="register_passWord" class="form-control" maxlength="16" placeholder="10-16位由数字字母下划线组成">
                </div>
                <p>密码不符合规范</p>
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">确认密码</span>
                    </div>
                    <input type="password" id="register_rePassWord" class="form-control" maxlength="16" placeholder="请再次输入密码避免输入错误">
                </div>
                <p>两次密码不一致</p>
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text" id="code">验证码</span>
                    </div>
                    <input type="text" class="form-control" id="register_code" maxlength="4" placeholder="请输入右侧的图形验证码">
                    <canvas class="code-num" id="code_num"></canvas>
                </div>
                <p>验证码错误</p>
                <button class="btn btn-primary" id="register_user">注册</button>
            </div>
        </div>
    </div>
</div>
<!--底部导航栏 开始-->
<ul class="nav nav-pills nav-fill fixed-bottom" id="footer_nav">
    <li class="nav-item">
        <a class="nav-link" href="index.html">
            <div class="img"></div>
            首页
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="list.html">
            <div class="img"></div>
            列表
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="cart.html">
            <div class="img"></div>
            购物袋
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link nav-active" href="javascript:;">
            <div class="img"></div>
            我的
        </a>
    </li>
</ul>
<!--底部导航栏 结束-->
</body>
</html>